<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addText(){
				let df=document.createDocumentFragment();//创建节点碎片
				for(let i=0;i<10;i++){
					let element=document.createElement("div");
					element.innerHTML="文本内容";
					df.appendChild(element)//向节点碎片添加10次节点
				}
				document.querySelector(".con").appendChild(df);//将节点碎片添加进文档树
				
			}
			function addImg(){
				
				let df=document.createDocumentFragment();//创建节点碎片
				for(let i=0;i<10;i++){
				let element=document.createElement("img");
					element.setAttribute("src","../src/ok.png");
					df.appendChild(element)//向节点碎片添加10次节点
				}
				document.querySelector(".con").appendChild(df);//将节点碎片添加进文档树
				
			}
		</script>
	</head>
	<body>
		
		<button type="button" onclick="addText()">批量添加文本</button>
		<button type="button" onclick="addImg()">批量添加图片</button>
		
		<div class="con">
			
		</div>
	</body>
</html>
